<template>
    <div class="top-container">
         <div class="book-top">
           <div class="cart-container">
               <el-card class="box-card">
                    <div slot="header" class="clearfix cart-header">
                            <span>{{"热门书籍"}}</span>
                    </div>
                    <div v-for="(CartData,index) in  bookTop" :key="CartData.BooKId" class="text item  carttext">
                        <span  :class="{'one': index == 0,'tow':index == 1, 'three':index == 2 ,'other':index > 2 }">{{index+1}}</span>
                        {{ "《"+CartData.Book.bookName+"》"}}
                    </div>
              </el-card>
            </div>
      
         </div>
         <div class="user-top">
                <div class="cart-container">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix cart-header">
                            <span>{{"最爱读书的人"}}</span>
                    </div>
                        
                    <div  v-for="(CartData,index) in userTop" :key="index" class="text item carttext" >
                        <span :class="{'one': index == 0,'tow':index == 1, 'three':index == 2 ,'other':index > 2 }">{{index+1}}</span>
                        {{ CartData.User.name}}
                    </div>
              </el-card>
            </div>
         </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            bookTop:null,
            userTop:null,
        }
    },
    async  created(){//组件创建后向服务器请求排行榜数据
        this.bookTop = await this.$axios.get("/api/book/getBookTop");
        this.userTop = await this.$axios.get("/api/book/getUserTop");
        
    }
    
}
</script>
<style lang="less">
    .top-container{
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .cart-container{
            width: 300px;
            margin: 10px 20px ;
           .cart-header{
               text-align: center;
               font-size: 20px;
               font-family: "fantasy";
               font-weight: 700;
           }
           .carttext{
               cursor: pointer;
               padding: 5px;
            //    display: block !important;
               border-bottom : 1px solid #EBEEF5 ;
                overflow: hidden;
               text-overflow: ellipsis;
                white-space: nowrap;
                font-family: "隶书";
               .one{
                   color: #FE2D46;
               }
               .tow{
                   color: #F60;
               }
               .three{
                   color: #FAA90E;
               }
               .other{
                   color: #9195A3;
               }
               span{
                   margin: 1px 5px;
               }
           }
           .carttext:hover{
               color: #f40;
               font-weight: 700;
           }
           
        }
    }
</style>